<template>
  <div>
      <div class="classification">
        <div class="floatParent">
          <div :class="itemActive === item.platformSign ? 'media-item media-item-active' : 'media-item'" v-for="item in itemData" :key="item.platformSign" @click="changeMedia(item.platformSign)">
            <img v-if="itemActive === item.platformSign" class="media-icon" :src="item.activeIcon" />
            <img v-else class="media-icon" :src="item.icon" />
            <div class="media-data">
              <div class="data-title">账号数量</div>
              <div class="data-item">{{item.accountNum | dataFormat}}</div>
            </div>
            <div class="media-data">
              <div class="data-title">总阅读量</div>
              <div class="data-item">{{item.readCount | dataFormat}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="data-detail">
        <div class="data-display">
          <DataDisplay :dataType="itemActive" :accountTotalData="accountTotalData" />
        </div>
        <div class="detail-title">账号列表</div>
        <div v-if="accountDetailData.length === 0">
          <a-empty />
        </div>
        <div class="data-display" v-else>
          <a-layout>
            <a-layout-sider class="account-list" width="180">
              <div
                :class="accountIdActive === item.accountId ? 'list-item list-item-active' : 'list-item'"
                :title="item.accountName"
                v-for="(item, index) in accountDetailData"
                :key="item.accountId"
                @click="changeAccount(index)"
              >
                {{item.accountName}}
              </div>
            </a-layout-sider>
            <a-layout-content class="account-data">
              <div class="account-detail">
                <DataDisplay :dataType="itemActive" :accountTotalData="accountDataActive" />
              </div>
              <AccountTable :dataType="itemActive" :accountDataTable="accountDataActive" />
            </a-layout-content>
          </a-layout>
        </div>
      </div>
  </div>
</template>

<script>
  //自媒体数据统计
  import DataDisplay from "./modules/DataDisplay";
  import AccountTable from './modules/AccountTable';
  import { getAction } from '@/api/manage'

  export default {
    name: "mediaIndex",
    components: {DataDisplay, AccountTable},
    data() {
      return {
        url: {
          accountTotal: '/platformData/accountTotal',
          platformTotal: '/platformData/platformTotal',
          detailData: '/platformData/detailData',
        },
        items: [
          {platformSign: 'wx', icon: require('@/assets/self_media/wx.png'), activeIcon: require('@/assets/self_media/wx_active.png')},
          {platformSign: 'dy', icon: require('@/assets/self_media/dy.png'), activeIcon: require('@/assets/self_media/dy_active.png')},
          {platformSign: 'xhs', icon: require('@/assets/self_media/xhs.png'), activeIcon: require('@/assets/self_media/xhs_active.png')},
          {platformSign: 'ks', icon: require('@/assets/self_media/ks.png'), activeIcon: require('@/assets/self_media/ks_active.png')},
          {platformSign: 'wb', icon: require('@/assets/self_media/wb.png'), activeIcon: require('@/assets/self_media/wb_active.png')},
          {platformSign: 'bili', icon: require('@/assets/self_media/bili.png'), activeIcon: require('@/assets/self_media/bili_active.png')},
        ],
        itemActive: 'wx',
        itemData: [],
        accountTotalData: {},
        accountDetailData: [],
        accountIdActive: '',
        accountDataActive: {},
      }
    },
    created() {
      this.getAccountTotal();
      this.getAccountTotalData();
      this.getAccountDetailData();
    },
    methods: {
      getAccountTotal() {
        getAction(this.url.accountTotal).then(res=>{
          if(res.success && res.result){
            this.items.forEach((item, index) => { 
              let b = res.result.findIndex(o => o.platformSign === item.platformSign);
              const obj = {...item, ...res.result[b]}
              this.itemData.push(obj);
            });
          }
        })
      },
      changeMedia(key) {
        if (this.itemActive !== key) {
          this.itemActive = key;
          this.$nextTick(() => {
            this.getAccountTotalData();
            this.getAccountDetailData();
          });
        }
      },
      getAccountTotalData() {
        this.accountTotalData = {};
        getAction(this.url.platformTotal, {platformType: this.itemActive}).then(res=>{
          if(res.success && res.result){
            this.accountTotalData = res.result
          }
        })
      },
      getAccountDetailData() {
        getAction(this.url.detailData, {platformType: this.itemActive}).then(res=>{
          if(res.success && res.result){
            this.accountDetailData = [];
            res.result.forEach((item, index) => {
              const itemInfo = {
                accountName: item.name,
                accountId: item.id,
                accountData: item,
              }
              this.accountDetailData.push(itemInfo);
            });
            console.log(this.accountDetailData);
            this.accountIdActive = this.accountDetailData[0].accountId;
            this.accountDataActive = this.accountDetailData[0].accountData;
          } else {
            this.accountDetailData = [];
            this.accountIdActive = '';
            this.accountDataActive = {};
          }
        })
      },
      changeAccount(index) {
        this.accountIdActive = this.accountDetailData[index].accountId;
        this.accountDataActive = this.accountDetailData[index].accountData;
      },
    }
  }
</script>

<style scoped lang="less">
  .classification {
    overflow-x: auto;
    .floatParent {
      display: inline-block;
      width: 2105px;
      .media-item {
        width: 340px;
        float: left;
        margin-right: 13px;
        background: #F7F8FA;
        padding: 22px 16px;
        overflow: hidden;
        border-radius: 4px 4px 0 0;
        cursor: pointer;
        .media-icon {
          width: 44px;
          height: 44px;
          float: left;
          margin-right: 4px;
        }
        .media-data {
          float: left;
          margin-left: 12px;
          .data-title {
            font-size: 14px;
            color: #666;
          }
          .data-item {
            font-weight: bold;
            font-size: 24px;
            color: #333;
          }
        }
      }
      .media-item:last-child {
        margin-right: 0;
      }
      .media-item-active {
        background: #1C9711;
        .data-title {
          color: #fff !important;
        }
        .data-item {
          color: #fff !important;
        }
      }
    }
  }
  .data-detail {
    padding: 12px;
    background: #fff;
    border-radius: 0 0 4px 4px;
    .data-display {
      border: 1px solid #F7F8FA;
    }
    .detail-title {
      font-weight: 600;
      font-size: 16px;
      color: #333333;
      margin: 20px 0;
    }
  }
  .account-list {
    background: #F0F2F5;
    .list-item {
      line-height: 48px;
      font-size: 14px;
      color: #333333;
      padding: 0 12px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
    }
    .list-item-active {
      background: #fff !important;
    }
  }
  .account-data {
    background: #fff;
    padding: 16px;
    .account-detail {
      background: #F7F8FA;
      border-radius: 4px;
      margin-bottom: 16px;
    }
  }

</style>